<template>
    <el-card>
        <div class="header-bar">
            <span class="title">告警中心</span>
            <el-select v-model="search.type" placeholder="告警类型" size="small" style="width:130px;margin-right:10px;"
                clearable>
                <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="search.level" placeholder="级别" size="small" style="width:110px;margin-right:10px;"
                clearable>
                <el-option label="高" value="高" />
                <el-option label="中" value="中" />
                <el-option label="低" value="低" />
            </el-select>
            <el-select v-model="search.status" placeholder="状态" size="small" style="width:110px;margin-right:10px;"
                clearable>
                <el-option label="未处理" value="未处理" />
                <el-option label="处理中" value="处理中" />
                <el-option label="已处理" value="已处理" />
            </el-select>
            <el-date-picker v-model="search.date" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                size="small" style="width:240px;margin-right:10px;" value-format="YYYY-MM-DD" clearable />
            <el-button type="primary" size="small" @click="onAdd">新增告警</el-button>
        </div>
        <el-table :data="filteredList" border style="width:100%;margin-top:16px;" height="500px"
            :row-key="row => row.id" :row-class-name="rowClassName">
            <el-table-column prop="id" label="编号" width="100" />
            <el-table-column prop="type" label="类型" width="110" />
            <el-table-column prop="level" label="级别" width="70">
                <template #default="{ row }">
                    <el-tag :type="levelColor(row.level)">{{ row.level }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="device" label="设备" min-width="110" />
            <el-table-column prop="content" label="内容" min-width="140" />
            <el-table-column prop="status" label="状态" width="80" />
            <el-table-column prop="alarmTime" label="告警时间" width="130" />
            <el-table-column prop="handler" label="处理人" width="90" />
            <el-table-column prop="handleTime" label="处理时间" width="130" />
            <el-table-column prop="remark" label="备注" min-width="100" />
            <el-table-column label="操作" width="210">
                <template #default="{ row }">
                    <el-button v-if="row.status !== '已处理'" size="small" type="success"
                        @click="onHandle(row)">处理</el-button>
                    <el-button v-if="row.status !== '已处理'" size="small" type="warning"
                        @click="onIgnore(row)">忽略</el-button>
                    <el-button size="small" type="danger" @click="onDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增/处理弹窗 -->
        <el-dialog v-model="editVisible" :title="editForm.id ? '处理告警' : '新增告警'">
            <el-form :model="editForm" label-width="90px">
                <el-form-item label="类型">
                    <el-select v-model="editForm.type">
                        <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="级别">
                    <el-select v-model="editForm.level">
                        <el-option label="高" value="高" />
                        <el-option label="中" value="中" />
                        <el-option label="低" value="低" />
                    </el-select>
                </el-form-item>
                <el-form-item label="设备"><el-input v-model="editForm.device" /></el-form-item>
                <el-form-item label="内容"><el-input v-model="editForm.content" /></el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="editForm.status">
                        <el-option label="未处理" value="未处理" />
                        <el-option label="处理中" value="处理中" />
                        <el-option label="已处理" value="已处理" />
                    </el-select>
                </el-form-item>
                <el-form-item label="告警时间">
                    <el-date-picker v-model="editForm.alarmTime" type="datetime" style="width:100%;"
                        value-format="YYYY-MM-DD HH:mm" />
                </el-form-item>
                <el-form-item label="处理人"><el-input v-model="editForm.handler" /></el-form-item>
                <el-form-item label="处理时间">
                    <el-date-picker v-model="editForm.handleTime" type="datetime" style="width:100%;"
                        value-format="YYYY-MM-DD HH:mm" />
                </el-form-item>
                <el-form-item label="备注"><el-input v-model="editForm.remark" type="textarea" /></el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editVisible = false">取消</el-button>
                <el-button type="primary" @click="onSave">保存</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

// 类型选项
const typeOptions = [
    '设备故障', '温度过高', '断电', '滤网堵塞', '配件缺失', '压力异常',
    '电极片脱落', '维护到期', '参数越限', '门未关闭', '耗材用尽',
    '存储溢出', '软件异常', '通信故障', '电池低电'
]

// 模拟数据
const list = ref([
    { id: 'A-0001', type: '设备故障', level: '高', device: '心电监护仪A', content: '主板通信异常', status: '未处理', alarmTime: '2024-06-10 08:12', handler: '', handleTime: '', remark: '' },
    { id: 'A-0002', type: '温度过高', level: '中', device: '注射泵B', content: '内部温度报警', status: '处理中', alarmTime: '2024-06-10 10:35', handler: '张三', handleTime: '2024-06-10 11:00', remark: '' },
    { id: 'A-0003', type: '断电', level: '高', device: 'CT机C', content: '设备断电自动关机', status: '未处理', alarmTime: '2024-06-10 12:20', handler: '', handleTime: '', remark: '' },
    { id: 'A-0004', type: '滤网堵塞', level: '低', device: '呼吸机D', content: '滤网阻力大', status: '已处理', alarmTime: '2024-06-09 15:40', handler: '李四', handleTime: '2024-06-09 16:10', remark: '已更换滤网' },
    { id: 'A-0005', type: '配件缺失', level: '中', device: '血透机E', content: '加热器缺失报警', status: '未处理', alarmTime: '2024-06-08 09:10', handler: '', handleTime: '', remark: '' },
    { id: 'A-0006', type: '压力异常', level: '高', device: '注射泵C', content: '输出压力超标', status: '处理中', alarmTime: '2024-06-08 14:00', handler: '王五', handleTime: '2024-06-08 14:20', remark: '' },
    { id: 'A-0007', type: '电极片脱落', level: '低', device: '心电监护仪B', content: '右臂电极片脱落', status: '已处理', alarmTime: '2024-06-08 15:32', handler: '护士赵', handleTime: '2024-06-08 15:45', remark: '' },
    { id: 'A-0008', type: '维护到期', level: '中', device: '化学分析仪', content: '定期维护提醒', status: '未处理', alarmTime: '2024-06-07 11:22', handler: '', handleTime: '', remark: '' },
    { id: 'A-0009', type: '参数越限', level: '高', device: '麻醉机A', content: '压力超限', status: '处理中', alarmTime: '2024-06-07 13:09', handler: '李四', handleTime: '2024-06-07 13:28', remark: '' },
    { id: 'A-0010', type: '门未关闭', level: '低', device: '冷藏柜', content: '检测到门开启', status: '未处理', alarmTime: '2024-06-06 18:00', handler: '', handleTime: '', remark: '' },
    { id: 'A-0011', type: '耗材用尽', level: '中', device: '自动取样机', content: '试剂盒已用尽', status: '未处理', alarmTime: '2024-06-06 19:42', handler: '', handleTime: '', remark: '' },
    { id: 'A-0012', type: '存储溢出', level: '高', device: '工作站PC', content: '磁盘存储空间不足', status: '已处理', alarmTime: '2024-06-05 08:30', handler: 'IT专员', handleTime: '2024-06-05 09:00', remark: '清理磁盘' },
    { id: 'A-0013', type: '软件异常', level: '中', device: 'B超仪', content: '软件死机', status: '未处理', alarmTime: '2024-06-04 20:10', handler: '', handleTime: '', remark: '' },
    { id: 'A-0014', type: '通信故障', level: '高', device: '移动DR', content: '网络中断', status: '未处理', alarmTime: '2024-06-03 13:33', handler: '', handleTime: '', remark: '' },
    { id: 'A-0015', type: '电池低电', level: '中', device: '输液泵D', content: '电池电量过低', status: '处理中', alarmTime: '2024-06-02 17:50', handler: '王五', handleTime: '2024-06-02 18:00', remark: '' }
])

const search = reactive({ type: '', level: '', status: '', date: null })
const filteredList = computed(() => {
    return list.value.filter(row => {
        const matchType = !search.type || row.type === search.type
        const matchLevel = !search.level || row.level === search.level
        const matchStatus = !search.status || row.status === search.status
        let matchDate = true
        if (search.date && search.date.length === 2) {
            const d0 = dayjs(search.date[0])
            const d1 = dayjs(search.date[1])
            matchDate = dayjs(row.alarmTime).isBetween(d0, d1, null, '[]')
        }
        return matchType && matchLevel && matchStatus && matchDate
    })
})

// 操作
const editVisible = ref(false)
const editForm = reactive({
    id: '', type: '', level: '中', device: '', content: '', status: '未处理', alarmTime: '', handler: '', handleTime: '', remark: ''
})
function onAdd() {
    Object.assign(editForm, { id: '', type: '', level: '中', device: '', content: '', status: '未处理', alarmTime: dayjs().format('YYYY-MM-DD HH:mm'), handler: '', handleTime: '', remark: '' })
    editVisible.value = true
}
function onHandle(row) {
    Object.assign(editForm, { ...row, status: '已处理', handler: '管理员', handleTime: dayjs().format('YYYY-MM-DD HH:mm') })
    editVisible.value = true
}
function onIgnore(row) {
    ElMessageBox.confirm('确认忽略该告警？', '提示', { type: 'warning' }).then(() => {
        row.status = '已处理'
        row.handler = '忽略'
        row.handleTime = dayjs().format('YYYY-MM-DD HH:mm')
        ElMessage.success('已忽略')
    })
}
function onDelete(row) {
    list.value = list.value.filter(item => item.id !== row.id)
}
function onSave() {
    // 新增或编辑
    if (!editForm.type || !editForm.level || !editForm.device || !editForm.content || !editForm.alarmTime) {
        ElMessage.warning('类型、级别、设备、内容、告警时间必填')
        return
    }
    if (!editForm.id) {
        editForm.id = 'A-' + (list.value.length + 1).toString().padStart(4, '0')
        list.value.unshift({ ...editForm })
        ElMessage.success('新增成功')
    } else {
        const idx = list.value.findIndex(item => item.id === editForm.id)
        if (idx !== -1) list.value[idx] = { ...editForm }
        ElMessage.success('处理完成')
    }
    editVisible.value = false
}
function levelColor(level) {
    if (level === '高') return 'danger'
    if (level === '中') return 'warning'
    return 'info'
}
function rowClassName({ row }) {
    if (row.level === '高' && row.status !== '已处理') return 'row-danger'
    if (row.level === '中' && row.status !== '已处理') return 'row-warning'
    return ''
}
</script>

<style scoped>
.header-bar {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.title {
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
}

/* 高危告警行高亮 */
:deep(.el-table .row-danger) {
    background: #fff1f0;
}

:deep(.el-table .row-warning) {
    background: #fffbe6;
}
</style>
